<template>
  <div class="icon-box">
    <el-select style="width: 100%" :teleported="false" clearable v-model="activeIcon" @change="handleCurrentChange">
      <template #label="{ label, value }">
        <div class="flex items-center">
          <span class="mr-1.5 leading-none">
            <IconView :model-value="`${iconPrefix[activeIconType]}${label}`"></IconView>
          </span>
          <span style="font-weight: bold">{{ value }}</span>
        </div>
      </template>
      <template #header>
        <div class="select-header flex justify-between items-center">
          <span class="font-600 text-sm">请选择图标</span>
          <div class="custom-style">
            <el-segmented v-model="activeIconType" :options="options" size="small" />
          </div>
        </div>
      </template>
      <el-option v-for="(item, index) in iconList" :key="index" :value="`${item.name}`">
        <IconView :model-value="`${iconPrefix[activeIconType]}${item.name}`"></IconView>
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { glyphs, css_prefix_text } from "@/assets/iconfont/iconfont.json";
import * as Icons from "@element-plus/icons-vue";
import IconView from "@/components/IconView/index.vue";
import { ref, reactive, watch, nextTick } from "vue";

defineOptions({
  name: "SelectIcon"
});

const iconModel = defineModel<string>({ default: "" });

const activeIconType = ref("AliIcon");
const AliIcon = glyphs.map(item => ({ name: item.font_class }));
const iconList = ref(AliIcon);

const iconPrefix = reactive({
  AliIcon: css_prefix_text,
  EleIcon: "ele-"
});

const activeIcon = ref(iconModel.value ? iconModel.value.split(iconPrefix[activeIconType.value])[1] : "");
const options = ["AliIcon", "EleIcon"];

if (iconModel.value && iconModel.value.startsWith("ele-")) {
  activeIconType.value = "EleIcon";
}

watch(
  () => activeIconType.value,
  async val => {
    await nextTick();
    iconList.value = val === "AliIcon" ? AliIcon : Object.keys(Icons).map(key => ({ name: key }));
    activeIcon.value = "";
  }
);

const handleCurrentChange = () => {
  iconModel.value = activeIcon.value ? `${iconPrefix[activeIconType.value]}${activeIcon.value}` : "";
};
</script>

<style scoped lang="scss">
.icon-box {
  width: 100%;
  .select-header {
    box-sizing: border-box;
    width: 100%;
  }
  .custom-style .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: var(--el-color-primary);
    --el-border-radius-base: 16px;
  }
  ::v-deep {
    .el-select-dropdown__list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      padding: 10px;
    }
    .el-select-dropdown__item {
      display: flex;
      flex: 0 0 25%;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin-bottom: 10px;
      text-align: center;
      border: 1px solid #dedede;
      border-radius: 6px;
      .iconfont {
        font-size: 20px;
      }
    }
    .el-select-dropdown__item.is-selected {
      font-weight: bold;
      color: #ffffff;
      background-color: var(--el-color-primary);
      border-color: var(--el-color-primary);
    }
  }
}
</style>
